import { DatePicker, Form, Space, Table, Button, ConfigProvider } from 'antd';
import { useNavigate } from 'react-router-dom';
import zh_CN from 'antd/locale/zh_CN'
import dayjs from 'dayjs';
import { Fragment, useState,useEffect } from 'react';
import { getAllWeekReportApi } from '@/api/api';
import './date.css'
const { RangePicker } = DatePicker;


const SelectDate = () => {
  const [count, setcount] = useState([])
  const [data, setdata] = useState([])
  const [keyvalue, setkeyvalue] = useState('')
  const [StartTime, setStartTime] = useState(0)
  const [EndtTime, setEndTime] = useState(0)
  const columns = [
    {
      title: '日期范围',
      dataIndex: 'date',
      key: 'date',
      ellipsis: true,
      width: '20%',
    },
    {
      title: '本周完成内容',
      dataIndex: 'content',
      key: 'content',
      ellipsis: true,
      width: '30%',
    },
    {
      title: '下周计划内容',
      dataIndex: 'nextWeekPlan',
      key: 'nextWeekPlan',
      ellipsis: true,
      width: '30%',
    },
    {
      title: '是否有延迟',
      dataIndex: 'isBalance',
      key: 'isBalance',
      width: '10%',
    },
    {
      title: '操作',
      dataIndex: '',
      key: 'x',
      width: '10%',
      render: (record) => <a onClick={() => { toDetail(record) }}>详情</a>,
    },
  ];
  //页面加载渲染数据
  useEffect(() => {
    getAllWeekReportApi({
      pagNo: pagination.current,
      pageSize: pagination.pageSize
    }).then((res) => {
      res.data.records.map((item) => {
        item.key = item.id
        item.isBalance = item.isBalance == "1" ? '是' : '否'
        item.date = `${item.startTime}~${item.endTime}`
      })
      setdata(res.data.records)
    })
  }, [])
  const showTotal = (total) => { return `共 ${total} 条记录`; }
  const pagination = {
    total: data.length,
    showTotal: showTotal,
    defaultPageSize:5,
    showSizeChanger: true,
    showQuickJumper: true,
    pageSizeOptions: [5, 10, 20, 30, 50]
  }
  const navigate = useNavigate()
  const addweek = () => {
    return navigate('/home/weekly/addweek')
  }
  //时间变化回调
  const onTimeChange = (date) => {
    if (date) {
        setStartTime(dayjs(date[0]).unix())
        setEndTime(dayjs(date[1]).unix())
    } else {
        console.log('Clear');
    }
};
  //查询按钮
  const query = () => {
    let info = data.filter((item)=>{
      return dayjs(item.startTime).unix()>=StartTime&&dayjs(item.endTime).unix()<=EndtTime
    })
    setdata(info)
  }
  //重置按钮
  const reset = () => {
    setStartTime(0)
    setEndTime(0)
    setkeyvalue(new Date())
    getAllWeekReportApi({
      pagNo: pagination.current,
      pageSize: pagination.pageSize
    }).then((res) => {
      res.data.records.map((item) => {
        item.key = item.id
        item.isBalance = item.isBalance == "1" ? '是' : '否'
        item.date = `${item.startTime}~${item.endTime}`
      })
      setdata(res.data.records)
    })
  }
  const onChange = (date) => {
    if (date) {
      setcount(date)
    } 
  };
  //详情
  const toDetail = (record) => {
    return navigate('/home/weekly/addweek', {
      replace: false,
      state: {
        startDate: dayjs(record.startTime).unix(),
        endDate:dayjs(record.endTime).unix(),
        delay: record.isBalance,
        done: record.content,
        todo: record.nextWeekPlan,
      }
    })
  }
  return (
    <Fragment>
      <Form layout='inline'>
        <Form.Item>
          日期范围：<DatePicker.RangePicker
            placeholder={["开始日期", "结束日期"]}
            key={keyvalue}
            onChange={onTimeChange}
            allowClear={true} />
        </Form.Item>
        <Form.Item><Button type='primary' onClick={query}>查询</Button></Form.Item>
        <Form.Item><Button  onClick={reset}>重置</Button></Form.Item>
      </Form>
      <Button onClick={addweek} style={{marginTop:"30px",marginBottom:"10px"}}>新增周报</Button>
      <ConfigProvider locale={zh_CN}>
        <Table
          columns={columns}
          dataSource={data}
          pagination={pagination}
        />
      </ConfigProvider>
    </Fragment>)
};
export default SelectDate;